<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯效果实现</title>
		<style>
			*{
				padding: 0;
				padding: 0;
			}
			.top_content{
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #aaff7f;
			
			}
			.sticky{
				color: white;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #ffaaff;
			}
			.main_content{
				height: 10000px;
				background-color: aquamarine;
			}
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		
		<script>
			$(function(){
				//JQ相关操作     思路：滚动下拉条，超过200px  吸顶灯顶死页面上
				//超过200px      固定>滚动   吸顶灯通过添加样式操作：钉死在页面
				//①固定值：获取到达吸顶灯位置的偏移量
				//offset() 获取或设置元素相对于文档偏移量
				//.top  获取body顶部
				var so=$(".sticky").offset().top;
				//$(Window)  来监听窗口的事件：滚动、窗口视图大小
				//scroll() 监听页面滚动事件
				$(Window).scroll(function(){
				//超过200px:
				//②获取页面滚动值：动态值   scrollTop()获取滚动位置 【动态值】
				var st=$(window).scrollTop();
				//超过200px:  动态值>固定值200   条件满足：页面吸顶灯样式定死
				if(st>so){
					$(".sticky").addClass("ac");
				}else{
					$(".sticky").removeClass("ac");
				}
				});
			});
			
		</script>
		
	</head>
	<body>
		<!-- 1.高：200  2.高：20  -->
		<div class="top_content">			
			顶部内容区域
		</div>
		
		<div class="sticky">
			我是吸顶灯元素区域
		</div>
		
		<div class="main_content">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident et, nesciunt unde quidem itaque necessitatibus repellendus magnam earum placeat officia omnis ea, quibusdam architecto libero totam, alias doloribus deserunt doloremque!lorem
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, voluptatibus. Quos laboriosam dolore quibusdam voluptas, unde excepturi beatae in quisquam soluta dolores! Quam totam facere perspiciatis rerum inventore, veniam omnis.lorem
		    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur earum odio quae consequuntur nam dolores magnam natus, ipsam officia veniam nulla harum ad, voluptatibus est eligendi eaque molestiae error ratione!
		    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum nam eaque in cumque sunt veniam perspiciatis facere quos, voluptates facilis voluptate accusantium iste animi sed nemo? Accusantium dolore tenetur maiores.
		</div>
		
	</body>
</html>